import "./index.scss"
import {View, Text} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect, useState} from "react"
import Taro, {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import {Switch, Picker, Button, Input, Image} from "@tarojs/components"
import {devInfoStore} from "./model"
import {
	AtSwitch,
	AtList,
	AtListItem,
	AtCheckbox,
	AtIcon,
	AtButton,
	AtInputNumber,
	AtAccordion
} from "taro-ui"
import staticData from "./data.json"
import {readStatusApi, openValveApi, closeValveApi} from "@/api/gj004"
import {getHexByTimes, getTimesFunc, mathTimeFunc} from "./utils"
import "taro-ui/dist/style/components/accordion.scss"

const GJ004Switch = () => {
	let router = useRouter()

	/* 数据  -------------------------------------------------------------------------- */
	// 液位上下限AtAccordion开关标识
	const [liquidLevelThresholdValueAtAccordion, setLiquidLevelThresholdValueAtAccordion] =
		useState(true)

	// 阀门1数据标识
	const [valve1Data, setValve1Data] = useState(false)

	// 阀门2数据标识
	const [valve2Data, setValve2Data] = useState(false)

	// 阀门3数据标识
	const [valve3Data, setValve3Data] = useState(false)

	// 阀门4数据标识
	const [valve4Data, setValve4Data] = useState(false)

	// 阀门5数据标识
	const [valve5Data, setValve5Data] = useState(false)

	// 显示阀门1开关的标识
	const [showValve1, setShowValve1] = useState(true)

	// 显示阀门2开关的标识
	const [showValve2, setShowValve2] = useState(true)

	// 显示阀门3开关的标识
	const [showValve3, setShowValve3] = useState(true)

	// 显示阀门4开关的标识
	const [showValve4, setShowValve4] = useState(true)

	// 显示阀门5开关的标识
	const [showValve5, setShowValve5] = useState(true)

	// controlId列表
	/* index name = 0-1开  1-1关  2-2开  3-2关  4-3开  5-3关  6-4开  7-4关 8-5开 9-5关  */
	const controlIds = [1, 10, 12, 13, 15, 16, 19, 20, 22, 23]
	// const controlIds = [20, 21, 22, 23]

	/* 函数 --------------------------------------------------------------------------- */
	// 液位上下限AtAccordion点击事件
	const liquidLevelThresholdValueAtAccordionClick = () => {
		setLiquidLevelThresholdValueAtAccordion(!liquidLevelThresholdValueAtAccordion)
	}

	// 阀门1Change事件
	const valve1Change = e => {
		setValve1Data(e.detail.value)
		// 判断是开启还是关闭
		if (e.detail.value == true) {
			openValveFunc(controlIds[0], 1)
		} else if (e.detail.value == false) {
			closeValveFunc(controlIds[1], 1)
		}
	}

	// 阀门2Change事件
	const valve2Change = e => {
		setValve2Data(e.detail.value)
		// 判断是开启还是关闭
		if (e.detail.value == true) {
			openValveFunc(controlIds[2], 2)
		} else if (e.detail.value == false) {
			closeValveFunc(controlIds[3], 2)
		}
	}

	// 阀门3Change事件
	const valve3Change = e => {
		setValve3Data(e.detail.value)
		// 判断是开启还是关闭
		if (e.detail.value == true) {
			openValveFunc(controlIds[4], 3)
		} else if (e.detail.value == false) {
			closeValveFunc(controlIds[5], 3)
		}
	}

	// 阀门4Change事件
	const valve4Change = e => {
		setValve4Data(e.detail.value)
		// 判断是开启还是关闭
		if (e.detail.value == true) {
			openValveFunc(controlIds[6], 4)
		} else if (e.detail.value == false) {
			closeValveFunc(controlIds[7], 4)
		}
	}

	// 阀门5Change事件
	const valve5Change = e => {
		setValve5Data(e.detail.value)
		// 判断是开启还是关闭
		if (e.detail.value == true) {
			openValveFunc(controlIds[8], 5)
		} else if (e.detail.value == false) {
			closeValveFunc(controlIds[9], 5)
		}
	}

	// 开启/关闭 - 成功/失败 弹窗函数
	const showToast = (flag, status) => {
		let flagText = ""
		let statusText = ""

		// 开关文本选择
		switch (flag) {
			case "open":
				flagText = "开启"
				break

			case "close":
				flagText = "关闭"
				break

			default:
				break
		}

		// 状态文本选择
		switch (status) {
			case "success":
				statusText = "成功"
				break

			case "error":
				statusText = "失败"
				break

			default:
				break
		}

		Taro.showToast({
			title: `${flagText}${statusText}`,
			icon: `${status == "success" ? "success" : "error"}`,
			duration: 1000,
			mask: true
		})
	}

	// 读取状态的函数
	const readStatusFunc = async () => {
		Taro.showLoading({
			title: "读取中"
		})
		setTimeout(() => {
			Taro.hideLoading()
		}, 12000)
		let data = {
			devGId: router.params.devGId as string
		}
		await readStatusApi(data).then(res => {
			Taro.hideLoading()
			if (res.result == "success") {
				console.log("读取阀门开关", res.data)
				disposeReadStatusFunc(res.data)
			} else if (res.result == "error") {
			}
		})
	}

	// 处理读取状态的函数
	const disposeReadStatusFunc = str => {
		let statusArr = str.split(":")
		// 更新阀门1的状态
		if (statusArr[0] == "open") {
			setValve1Data(true)
		} else if (statusArr[0] == "close") {
			setValve1Data(false)
		}
		// 更新阀门2的状态
		if (statusArr[1] == "open") {
			setValve2Data(true)
		} else if (statusArr[1] == "close") {
			setValve2Data(false)
		}

		// 更新阀门3的状态
		if (statusArr[2] == "open") {
			setValve3Data(true)
		} else if (statusArr[2] == "close") {
			setValve3Data(false)
		}

		// 更新阀门4的状态
		if (statusArr[3] == "open") {
			setValve4Data(true)
		} else if (statusArr[3] == "close") {
			setValve4Data(false)
		}

		// 更新阀门5的状态
		if (statusArr[4] == "open") {
			setValve5Data(true)
		} else if (statusArr[4] == "close") {
			setValve5Data(false)
		}

		console.log(`阀门1：${statusArr[0] == "open" ? "开启" : "关闭"}`)
		console.log(`阀门2：${statusArr[1] == "open" ? "开启" : "关闭"}`)
		console.log(`阀门3：${statusArr[2] == "open" ? "开启" : "关闭"}`)
		console.log(`阀门4：${statusArr[3] == "open" ? "开启" : "关闭"}`)
		console.log(`阀门5：${statusArr[4] == "open" ? "开启" : "关闭"}`)
	}

	// 更改状态的函数
	const changeStatusFunc = async () => {
		// await changeStatusApi({}).then(res => {
		// 	if (res.result == "success") {
		// 	} else if (res.result == "error") {
		// 	}
		// })
	}

	// 开启阀门的请求函数
	const openValveFunc = async (controlId: number, num: number) => {
		Taro.showLoading({
			title: "执行中"
		})
		setTimeout(() => {
			Taro.hideLoading()
		}, 12000)
		let data = {
			devGId: router.params.devGId,
			controlId: controlId
		}
		await openValveApi(data)
			.then(res => {
				if (res.result == "success") {
					showToast("open", "success")
				} else if (res.result == "error") {
					showToast("open", "error")
					// setValve1Data(!valve1Data)
					// 判断是哪个阀门
					if (num == 1) {
						setShowValve1(false)
						// setTimeout(() => {
						setShowValve1(true)
						setValve1Data(false)
						// }, 200)
					} else if (num == 2) {
						setShowValve2(false)
						// setTimeout(() => {
						setShowValve2(true)
						setValve2Data(false)
						// }, 200)
					} else if (num == 3) {
						setShowValve3(false)
						// setTimeout(() => {
						setShowValve3(true)
						setValve3Data(false)
						// }, 200)
					} else if (num == 4) {
						setShowValve4(false)
						// setTimeout(() => {
						setShowValve4(true)
						setValve4Data(false)
						// }, 200)
					} else if (num == 5) {
						setShowValve5(false)
						// setTimeout(() => {
						setShowValve5(true)
						setValve5Data(false)
						// }, 200)
					}
				}
			})
			.catch(err => {
				showToast("open", "error")
				// 判断是哪个阀门
				if (num == 1) {
					setShowValve1(false)
					// setTimeout(() => {
					setShowValve1(true)
					setValve1Data(false)
					// }, 200)
				} else if (num == 2) {
					setShowValve2(false)
					// setTimeout(() => {
					setShowValve2(true)
					setValve2Data(false)
					// }, 200)
				} else if (num == 3) {
					setShowValve3(false)
					// setTimeout(() => {
					setShowValve3(true)
					setValve3Data(false)
					// }, 200)
				} else if (num == 4) {
					setShowValve4(false)
					// setTimeout(() => {
					setShowValve4(true)
					setValve4Data(false)
					// }, 200)
				} else if (num == 5) {
					setShowValve5(false)
					// setTimeout(() => {
					setShowValve5(true)
					setValve5Data(false)
					// }, 200)
				}
			})
			.finally(() => {
				Taro.hideLoading()
			})
	}

	const closeValveFunc = async (controlId: number, num: number) => {
		Taro.showLoading({
			title: "执行中"
		})
		setTimeout(() => {
			Taro.hideLoading()
		}, 12000)
		let data = {
			devGId: router.params.devGId,
			controlId: controlId
		}
		await closeValveApi(data)
			.then(res => {
				if (res.result == "success") {
					showToast("close", "success")
				} else if (res.result == "error") {
					showToast("close", "error")
					// 判断是哪个阀门
					if (num == 1) {
						setShowValve1(false)
						// setTimeout(() => {
						setShowValve1(true)
						setValve1Data(true)
						// }, 200)
					} else if (num == 2) {
						setShowValve2(false)
						// setTimeout(() => {
						setShowValve2(true)
						setValve2Data(true)
						// }, 200)
					} else if (num == 3) {
						setShowValve3(false)
						// setTimeout(() => {
						setShowValve3(true)
						setValve3Data(true)
						// }, 200)
					} else if (num == 4) {
						setShowValve4(false)
						// setTimeout(() => {
						setShowValve4(true)
						setValve4Data(true)
						// }, 200)
					} else if (num == 5) {
						setShowValve5(false)
						// setTimeout(() => {
						setShowValve5(true)
						setValve5Data(true)
						// }, 200)
					}
				}
			})
			.catch(err => {
				showToast("close", "error")
				// 判断是哪个阀门
				if (num == 1) {
					setShowValve1(false)
					// setTimeout(() => {
					setShowValve1(true)
					setValve1Data(true)
					// }, 200)
				} else if (num == 2) {
					setShowValve2(false)
					// setTimeout(() => {
					setShowValve2(true)
					setValve2Data(true)
					// }, 200)
				} else if (num == 3) {
					setShowValve3(false)
					// setTimeout(() => {
					setShowValve3(true)
					setValve3Data(true)
					// }, 200)
				} else if (num == 4) {
					setShowValve4(false)
					// setTimeout(() => {
					setShowValve4(true)
					setValve4Data(true)
					// }, 200)
				} else if (num == 5) {
					setShowValve5(false)
					// setTimeout(() => {
					setShowValve5(true)
					setValve5Data(true)
					// }, 200)
				}
			})
			.finally(() => {
				Taro.hideLoading()
			})
	}

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Devinfo useEffect")
	})
	// 对应 onShow
	useDidShow(() => {
		console.log("Devinfo useDidShow")
		console.log("param", router.params)
		readStatusFunc()
		// showToast("open", "success")
	})
	// 对应 onHide
	useDidHide(() => {
		console.log("Devinfo useDidHide")
	})

	return (
		<View className="gj004_switch_wrap">
			<View className="hanzi text-16 font-bold mt-14 mb-14 px-16">GJ004开关控制</View>
			<View className="hanzi text-14 text-xx_text mb-14 px-16">
				您可以对GJ004型号设备进行液位上下限设置及开关控制
			</View>

			{/* 开关条件模块 */}
			{/* <View className="switch_condition_box">
				<View className="title_box">
					<Text>开关条件</Text>
				</View>
			</View> */}

			{/* 控制开关模块 */}
			<View className="control_switch_box">
				<View className="title_box">
					<Text>控制开关</Text>
				</View>
				<View className="switch_main_box">
					<View className="switch1_box valve_box">
						<View className="label_box">
							<Image
								className="valve_icon_img"
								src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/icon/valve.svg"
							></Image>
							<Text className="label">污水阀门开</Text>
						</View>
						<View className="switch_value">
							{showValve1 ? (
								<Switch
									className="con_switch"
									color="#0f8af9"
									checked={valve1Data}
									onChange={e => {
										valve1Change(e)
									}}
								/>
							) : null}
						</View>
					</View>

					<View className="switch2_box valve_box">
						<View className="label_box">
							<Image
								className="valve_icon_img"
								src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/icon/valve.svg"
							></Image>
							<Text className="label">污水阀门关</Text>
						</View>
						<View className="switch_value">
							{showValve2 ? (
								<Switch
									className="con_switch"
									color="#0f8af9"
									checked={valve2Data}
									onChange={e => {
										valve2Change(e)
									}}
								/>
							) : null}
						</View>
					</View>

					<View className="switch3_box valve_box">
						<View className="label_box">
							<Image
								className="valve_icon_img"
								src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/icon/valve.svg"
							></Image>
							<Text className="label">排水阀门开</Text>
						</View>
						<View className="switch_value">
							{showValve3 ? (
								<Switch
									className="con_switch"
									color="#0f8af9"
									checked={valve3Data}
									onChange={e => {
										valve3Change(e)
									}}
								/>
							) : null}
						</View>
					</View>

					<View className="switch4_box valve_box">
						<View className="label_box">
							<Image
								className="valve_icon_img"
								src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/icon/valve.svg"
							></Image>
							<Text className="label">排水阀门关</Text>
						</View>
						<View className="switch_value">
							{showValve4 ? (
								<Switch
									className="con_switch"
									color="#0f8af9"
									checked={valve4Data}
									onChange={e => {
										valve4Change(e)
									}}
								/>
							) : null}
						</View>
					</View>

					<View className="switch4_box valve_box">
						<View className="label_box">
							<Image
								className="valve_icon_img"
								src="https://d.lohand.com:1112/images/ConstantBlueCloud/wxminiprogram/icon/valve.svg"
							></Image>
							<Text className="label">水泵</Text>
						</View>
						<View className="switch_value">
							{showValve5 ? (
								<Switch
									className="con_switch"
									color="#0f8af9"
									checked={valve5Data}
									onChange={e => {
										valve5Change(e)
									}}
								/>
							) : null}
						</View>
					</View>
				</View>
			</View>
		</View>
	)
}
export default observer(GJ004Switch)
